<template>
	<view class="content">
		<u-navbar title="我的" :placeholder='true' height="88rpx" left-icon=" " titleStyle='color:#fff;font-size:32rpx'
			left-icon-size="32rpx" bg-color="#FF594D" :autoBack="false">
		</u-navbar>

		<view class="personal_details">
			<view class="personal_bg">
				<image src="/static/images/index/Intersect@2x.png" mode=""></image>
			</view>
			<view class="user_info">
				<view class="user_hade_img">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="username">
					<view class="nickname">
						{{userInfo.name}}
					</view>
					<view class="integral" v-if="isMember">
						<text class="integral_left">积分卡号：{{pointNumber}}</text>
						<text>积分：{{point}}</text>
					</view>
					<view class="integral" v-else>
						<text class="integral_left">积分卡号：暂无卡号</text>
						<text>积分：无</text>
					</view>
				</view>
				<view class="user_qr" @click="qrshow = true">
					<u-icon name="grid" size="44rpx"></u-icon>
				</view>
				<view class="amend_info" @click="navigateTo(`../../pages/personal-data/personal-data?id=${userInfo.id}`)">
					修改信息<image src="../../static/images/mine/Group@2x.png" mode=""></image>
				</view>
			</view>
			<u-popup :safeAreaInsetBottom="false" :show="qrshow" :round="10" mode="center" @open="qropen" @close="qrclose">
				<view class="qrImage">
					<!-- <image src="../../static/userqr.png" mode=""></image> -->
					<image :src="userQrCode" mode=""></image>
					<view class="userPhone">
						<!-- {{$store.state.user.phone}} -->
						{{userPhone}}
					</view>
				</view>
			</u-popup>
			<view class="user_type">
				<view class="user_item">
					<view class="user_title">
						用户类型
					</view>
					<view class="user_ico" v-if="!isMember">
						<image src="../../static/images/mine/VIP@2x.png" mode=""></image>普通用户
					</view>
					<view class="user_ico vip" v-else>
						<image src="../../static/images/mine/VIP@2x (1).png" mode=""></image>{{getMemberText(memberType)}}
					</view>
				</view>
				<view class="user_item user_item_border" @click="navigateTo('/pages_mine/pages/mine-rights/mine-rights')">
					<view class="user_title">
						会员权益
					</view>
					<view class="user_ico">
						<image src="../../static/images/mine/Frame@2x.png" mode=""></image>领取福利
					</view>
				</view>
				<view class="user_item" @click="navigateTo('/pages_mine/pages/mine-coupon/mine-coupon')">
					<view class="user_title">
						卡券
					</view>
					<view class="user_ico">
						<image src="../../static/images/mine/Frame@2x (1).png" mode=""></image>{{couponTotal}}
					</view>
				</view>
			</view>
		</view>
		<view class="order_content" v-if="employeeIsLogin">
			<view class="order_item" @click="toRefund">
				<image src="../../static/images/mine/Frame@2x (11).png" mode=""></image>
				<view class="text">
					退款订单
				</view>
			</view>
			<view class="order_item" @click="navigateTo('/pages_mine/pages/pick-order/pick-order')">
				<image src="../../static/images/mine/Frame111@2x.png" mode=""></image>
				<view class="text">
					提货订单
				</view>
			</view>
		</view>

		<view class="bar_code" v-if="isMember">
			<!-- <view class="bar_code" v-if="false"> -->
			<view class="bar_content">
				<view class="bar_title">
					电子会员卡
				</view>
				<view class="bar_image">
					<view class="bilateral">
						<!-- <view class="">积分</view> -->
						<!-- <view class="">{{point}}</view> -->
						<!-- <view class=""> </view>
						<view class=""></view> -->
					</view>
					<view class="bar_code_image">
						<image :src="baseUrl + '/files' +barCode" mode="widthFix"></image>
						<!-- <image src="../../static/images/mine/条形码 1@2x.png" mode="widthFix"></image> -->
					</view>
					<view class="bilateral">
						<view class="">余额</view>
						<view class="">{{balance}}元</view>
					</view>
				</view>
				<!-- <view class="upgrade">
					<view class="upgrade_text">
						升级进度
					</view>
					<view class="upgrade_bar_content">
						<view class="upgrade_bar">
							<view class="current">
							</view>
						</view>
						<view class="upgrade_data">
							30/500
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<view class="grid">
			<view class="grid_content">
				<view class="grid_title">
					<view class="grid_title_left">
						我的订单
					</view>
					<view class="grid_title_right" @click="navigateTo('/pages_mine/pages/mine-order/mine-order?index=0')">
						全部订单<image src="../../static/images/mine/图标@2x.png" mode=""></image>
					</view>
				</view>
				<view class="grid_wrap orders">
					<template v-for="item in orderList">
						<view class="grid_item" :key="item.url" @click="navigateTo(item.url)">
							<image :src="item.src" mode=""></image>
							{{item.text}}
							<view v-if="item.number>0" class="reminder">{{item.number}}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="grid">
			<view class="grid_content">
				<view class="grid_title">
					<view class="grid_title_left">
						我的服务
					</view>
				</view>
				<view class="grid_wrap">
					<template v-for="item in serveList">
						<view class="grid_item" :key="item.url" @click="navigateTo(item.url)">
							<image :src="item.src" mode=""></image>
							{{item.text}}
						</view>
					</template>
					<view class="grid_item" v-if="employeeIsLogin" @click="toSpell">
						<image src="../../static/images/mine/Frame 492@2x.png" mode=""></image>
						员工管理
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="margin-bottom: 20rpx;">
			<u-button @click="" :customStyle='btnCustomSty2'
				@click="navigateTo('/pages_spell/pages/employee-login/employee-login')">员工登录</u-button>
		</view> -->
		<view>

			<u-modal :show="show" :showCancelButton='true' @cancel="cancel" @confirm="confirm" :title="title"
				confirmColor='red'>
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
			<u-button @click="show = true" :customStyle='btnCustomStyle'>退出登录</u-button>
		</view>

		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		userInfo,
		memberInfo,
		ordersList,
		getUserCouponList
	} from '../../api/mine.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		memberList
	} from '../../api/employee.js'
	import baseUrl from '../../utils/base.js'
	export default {
		onShow() {
			uni.hideTabBar()
			// console.log(this.getIsLogin);
			// console.log(this.$store.state.employeeIsLogin);
			if (this.$store.state.employeeIsLogin) {
				this.employeeIsLogin = true
			}
			if (!this.$store.getters.getIsLogin) {
				uni.navigateTo({
					url: '/pages_mine/pages/login/login'
				})
				return
			}

			this.userInfo = this.$store.state.user
			this.getMemberInfo(this.$store.state.userInfo.id)
			// 获取用户信息

			this.isMember = this.$store.state.isMember
			if (this.getIsLogin) {
				const id = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).id : null
				this.getOrdersList({
					userId: id,
					id: id
				})
				this.getCouponListData()
				return
			}
			uni.showToast({
				title: '未登录',
				icon: 'error',
			})
			this.getOrdersList()
		},
		data() {
			return {
				userPhone: '',
				titleStyle: {
					color: '#fff',
				},
				baseUrl,
				orderList: [{
						text: '待付款',
						src: '../../static/images/mine/Rectangle 1780@2x.png',
						url: '/pages_mine/pages/mine-order/mine-order?index=1',
						number: 0
					}, {
						text: '待发货',
						src: '../../static/images/mine/Frame 483@2x.png',
						url: '/pages_mine/pages/mine-order/mine-order?index=2',
						number: 0
					}, {
						text: '待收货',
						src: '../../static/images/mine/Frame@2x22.png',
						url: '/pages_mine/pages/mine-order/mine-order?index=3',
						number: 0
					}, {
						text: '待评价',
						src: '../../static/images/mine/Rectangle 1780@2x (1).png',
						url: '/pages_mine/pages/mine-order/mine-order?index=7',
						number: 0
					},
					{
						text: '全部订单',
						src: '../../static/images/mine/Rectangle 1780@2x (2).png',
						url: '/pages_mine/pages/mine-order/mine-order?index=0',
						number: 0
					},
				],
				serveList: [{
						text: '主产品订单',
						src: '../../static/images/mine/Frame 486@2x.png',
						url: '/pages_mine/pages/main-product-order/main-product-order'
					}, {
						text: 'VIP订单',
						src: '../../static/images/mine/Frame 487@2x.png',
						url: '/pages_mine/pages/vip-order/vip-order'
					}, {
						text: '我的收藏',
						src: '../../static/images/mine/Frame 488@2x.png',
						url: '/pages_mine/pages/collect-page/collect-page'
					}, {
						text: '我的团购',
						src: '../../static/images/mine/Frame 489@2x.png',
						url: '/pages_mine/pages/mine-group/mine-group'
					}, {
						text: '我的分享',
						src: '../../static/images/mine/Frame 490@2x.png',
						url: '/pages_mine/pages/share/share'
					}, {
						text: '地址管理',
						src: '../../static/images/mine/Frame 491@2x.png',
						url: '/pages_mine/pages/address-administration/address-administration'
					}, {
						text: '关于我们',
						src: '../../static/images/mine/Frame 492@2x.png',
						url: '/pages_mine/pages/about-us/about-us'
					},
					// {
					// 	text: '员工管理',
					// 	src: '../../static/images/mine/Frame 492@2x.png',
					// 	url: '/pages_mine/pages/spell-page/spell-page'
					// }
				],
				userInfo: {
					avatar: '',
					name: '未登录',
					id: 0,
				},
				memberAction: [{
					memberType: '无效客户',
					value: 0
				}, {
					memberType: '普卡会员',
					value: 1
				}, {
					memberType: '拓新客户',
					value: 2
				}, {
					memberType: '银卡会员',
					value: 3
				}, {
					memberType: '金卡会员',
					value: 4
				}, {
					memberType: '钻卡会员',
					value: 5
				}, {
					memberType: '皇冠会员',
					value: 6
				}, {
					memberType: '一星黑卡会员',
					value: 7
				}, {
					memberType: '二星黑卡会员',
					value: 8
				}, {
					memberType: '三星黑卡会员',
					value: 9
				}, {
					memberType: '门店公海',
					value: 10
				}, {
					memberType: '公司公海',
					value: 11
				}],
				employeeIsLogin: false, // 员工是否登录
				couponTotal: 0,
				point: 0,
				memberType: 0,
				isMember: false,
				balance: -1,
				pointNumber: -1,
				show: false,
				title: '退出登录',
				content: '是否退出登录',
				btnCustomStyle: {
					'font-size': '28rpx',
					'color': 'red',
					height: '70rpx'
				},
				btnCustomSty2: {
					'font-size': '28rpx',
					'color': '#0086D1',
					height: '70rpx'
				},
				barCode: '',
				qrshow: false,
				userQrCode: ''
			}
		},

		created() {
			const obj = {
				username: '', // 用户姓名，限制2-20位字符
				phone: '', // 要求中国大陆手机号，带有正则验证
				age: 0, // 要求输入纯数字
				sex: 1, // 单选框，1代表 男  0代表女
			}

		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			toSpell() {
				this.getMemberList('/pages_mine/pages/spell-page/spell-page')
			},
			toRefund() {
				this.getMemberList('/pages_mine/pages/refund-page/refund-page')
				// this.navigateTo()
			},
			getMemberText(value) {
				console.log(value);
				return this.memberAction[value].memberType
			},
			async getMemberList(url) {
				const res = await memberList()
				// console.log(res);
				if (res.code == 401) {
					// this.loginCode = res.code
					this.$store.commit('setEmployeeIsLogin', false)
					uni.showToast({
						title: 'crm账号绑定失效，请重新绑定',
						icon: 'none',
						success: () => {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/personal-data/personal-data?id=' + this.userInfo.id
								})
							}, 1000)
						}
					})
					return
				}
				uni.navigateTo({
					url
				})
				// this.loginCode = res.code
				// this.memberData = res.rows
			},
			async getCouponListData() {
				const res = await getUserCouponList()
				this.couponTotal = res.total
			},
			// 获取当前用户会员信息
			async getMemberInfo(data) {
				// const res = await memberInfo(data)
				// this.userInfo.memberType = res.data.memberType
				// console.log(res);
				// if (res.code == 200) {
				console.log(this.$store.state.member);
				if (this.$store.state.member.memberybDTO) {
					this.$store.commit('setIsMember', true)
					uni.setStorageSync('isMember', true)
					this.point = this.$store.state.member.memberybDTO.customerInfo.point
					this.memberNumber = this.$store.state.member.memberybDTO.customerInfo.point
					this.pointNumber = '暂无卡号'
					// this.pointNumber = this.$store.state.member.memberybDTO.customerInfo.number
					this.memberType = this.$store.state.member.memberType
					this.balance = this.$store.state.member.memberybDTO.customerInfo.balance
					this.barCode = this.$store.state.member.xxx.split('/')[this.$store.state.member.xxx.split('/').length - 1]
					// this.barCode = baseUrl + this.$store.state.member.xxx.substr(7)
					// console.log(res.data[0].xxx.substr(7));
				}
			},
			// 获取订单列表
			async getOrdersList(data) {
				// console.log(data)
				const res = await ordersList(data)
				this.orderList[3].number = res.rows.length
				this.orderList[0].number = res.rows.filter(item => {
					if (item.status == 1 || item.status == 2) {
						return item
					}
				}).length
				this.orderList[1].number = res.rows.filter(item => {
					if (item.status == 3) {
						return item
					}
				}).length
				this.orderList[2].number = res.rows.filter(item => {
					if (item.status == 4) {
						return item
					}
				}).length
				this.orderList[3].number = res.rows.filter(item => {
					if (item.comments == 1 && item.status == 5) {
						return item
					}
				}).length
			},
			cancel() {
				this.show = false
			},
			qropen() {
				const userQrCode = this.$store.state.userQrCode.split('/')
				this.userQrCode = baseUrl + '/files/' + userQrCode[userQrCode.length - 1];
			},
			confirm() {
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('user')
				uni.removeStorageSync('isMember')
				uni.removeStorageSync('userQrCode')
				uni.removeStorageSync('member')
				this.$store.commit('setUserQrCode', '')
				this.$store.commit('setIsLogin', false)
				this.$store.commit('setUserInfo', {})
				this.$store.commit('setTabValue', 0)
				this.$store.commit('setMember', {})
				uni.showToast({
					title: '退出成功'
				})
				uni.switchTab({
					url: '/pages/index/index'
				})

				this.show = false
			},
			qrclose() {
				this.qrshow = false
				// console.log('close');
			}
		},
		mounted() {
			this.userPhone = this.$store.state.user.phone;
		},
		computed: {
			...mapGetters(['getIsLogin'])
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 50rpx;

		.qrImage {
			padding: 40rpx;

			image {
				width: 450rpx;
				height: 450rpx;
				display: block;
			}

			.userPhone {
				text-align: center;
				font-size: 40rpx;
			}
		}

		.user_qr {
			position: absolute;
			display: flex;
			width: 45rpx;
			height: 45rpx;
			border-radius: 400rpx;
			background-color: #fff;
			align-items: center;
			justify-content: center;
			right: 30rpx;
			bottom: 60rpx;
		}

		.personal_details {
			height: 330rpx;
			position: relative;
			padding-bottom: 54rpx;

			.personal_bg {
				position: absolute;
				top: -98rpx;

				image {
					width: 750rpx;
					height: 457rpx;
				}
			}

			.user_info {
				padding: 23rpx 54rpx;
				display: flex;
				position: relative;

				.amend_info {
					width: 145rpx;
					height: 56rpx;
					background: rgba(232, 226, 223, 0.3);
					border-radius: 30rpx 0rpx 0rpx 30rpx;
					position: absolute;
					top: 12rpx;
					right: 0;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					padding-left: 22rpx;

					image {
						width: 10rpx;
						height: 18rpx;
						margin-left: 6rpx;
					}
				}

				.user_hade_img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 140rpx 140rpx 140rpx 140rpx;
					overflow: hidden;
					margin-right: 32rpx;

					image {
						width: 160rpx;
						height: 160rpx;
						display: block;
					}
				}

				.username {
					padding: 32rpx 0;
					position: relative;
					z-index: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.nickname {
						font-size: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.integral {
						// width: 500rpx;
						display: flex;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						flex-wrap: nowrap;

						text {
							white-space: nowrap;
						}

						.integral_left {
							padding-right: 50rpx;
						}
					}
				}
			}

			.user_type {
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				width: 710rpx;
				height: 140rpx;
				background-color: #fff;
				position: absolute;
				top: 224rpx;
				left: 20rpx;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;

				.user_item_border {
					border-right: 1rpx solid rgba(0, 0, 0, 0.3);
					border-left: 1rpx solid rgba(0, 0, 0, 0.3);
				}

				.user_item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 11rpx 0;
					box-sizing: border-box;
					justify-content: space-between;

					.user_title {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #777777;
					}

					.user_ico {
						display: flex;
						font-size: 24rpx;
						color: #333332;
						font-weight: 500;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 4rpx;
						}
					}

					.vip {
						color: #FF594D;
					}
				}
			}
		}

		.order_content {
			height: 124rpx;
			display: flex;
			padding: 0 150rpx 20rpx;

			justify-content: space-between;

			.order_item {
				text-align: center;

				image {
					width: 68rpx;
					height: 68rpx;
					margin-bottom: 20rpx;
				}

				.text {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}

		.bar_code {
			padding: 30rpx 20rpx;

			.bar_content {
				background-color: #fff;
				padding: 20rpx 0;
				border-radius: 10rpx;

				.bar_title {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333332;
					padding-left: 20rpx;
					padding-bottom: 20rpx;
				}
			}

			.bar_image {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bilateral {
					text-align: center;
					width: 112rpx;
					font-size: 26rpx;
				}

				.bar_code_image {
					width: 484rpx;
					height: 154rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: center;

					image {
						width: 484rpx;
						// height: 168rpx;
						height: 154rpx;
					}

					view {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #000000;
						text-align: center;
						width: 100%;
					}
				}
			}


			.upgrade {
				.upgrade_text {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333332;
					padding-bottom: 20rpx;
				}

				.upgrade_bar_content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.upgrade_bar {
						width: 561rpx;
						height: 17rpx;
						background: #D9D9D9;
						border-radius: 44rpx 44rpx 44rpx 44rpx;

						.current {
							width: 104rpx;
							height: 16rpx;
							background: #FF594D;
							border-radius: 44rpx 44rpx 44rpx 44rpx;
						}
					}

					.upgrade_data {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
			}
		}

		.grid {
			background-color: #fff;
			margin-bottom: 20rpx;

			.grid_content {
				padding: 33rpx 30rpx 0;

				.grid_title {
					display: flex;
					padding: 0 7rpx 20rpx;
					justify-content: space-between;
					align-items: center;

					.grid_title_left {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						color: #000000;
					}

					.grid_title_right {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
						display: flex;
						align-items: center;

						image {
							margin-left: 36rpx;
							width: 17rpx;
							height: 32rpx;
						}
					}
				}

				.grid_wrap {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-between;

					.grid_item {
						width: 126rpx;
						height: 114rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
						margin: 0 62rpx 42rpx 0;
						white-space: nowrap;
						position: relative;

						image {
							width: 68rpx;
							height: 68rpx;
						}

						.reminder {
							position: absolute;
							width: 39rpx;
							height: 28rpx;
							background-color: #FF2525;
							border-radius: 99rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							color: #FFFFFF;
							text-align: center;
							line-height: 28rpx;
							right: 20rpx;
						}
					}

					.grid_item:nth-of-type(4n+0) {
						margin-right: 0;
					}

					&.orders {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.grid_item {
							margin-right: 0;
						}

						.grid_item:nth-of-type(5n+0) {
							margin-right: 0;
						}
					}
				}

			}
		}
	}
</style>